JavaScript 101 快速入門教學

#javascript #ECMAScript2015 #ES6 #Front End #Front End Development Environment

Posted by KD Chang on 2017-01-14

JavaScript 101 快速入門教學

前言

Java 和 JavaScript 雖然名稱相似，但卻是熱狗和狗的差別。JavaScript 是由 Netscape 工程師 Brendan Eich 於 1995 年僅花 10 天所設計的程式語言，也因為一些歷史因素，JavaScript 成為被誤解最深的程式語言。JavaScript 是一種直譯式、基於原型（prototype based）的物件導向程式語言，但又具有函數式程式設計（Functional programming）的特性。其具備簡單好上手、應用範圍廣泛，容易有成就感，但精通不易等特性。過去一段時間 JavaScript 一直被認為是玩具語言，難登大雅之堂。但隨著版本的演進，再加上 NodeJS 的出現，讓 JavaScript 由黑翻紅成為程式語言的當紅巨星，目前雄據在程式語言排行榜前幾名，除了網頁開發外，在許多的領域都可以看到 JavaScript 的身影。本文將快速帶領大家掌握 JavaScript 重要且核心的觀念。

環境建置

JavaScript 的檔案只要使用一般的文字編輯器即可編輯（存成 .js 檔案），也可以使用 Sublime Text 等編輯器進行開發，JSBin 這個線上工具進行測試（當然你也可以使用 Chrome、Firefox 等瀏覽器的開發者工具）。除了編輯器外，實際開發上我們也會需要用到 Node.js 開發環境 和 NPM 套件管理系統（按照 Node.js 官方指示即可安裝）。Node.js 是一個開放原始碼、跨平台的、可用於伺服器端和網路應用的執行環境。

JavaScript 程式使用方式（HTML 中引入）

  1. 內嵌於 <head></head> (因 JS 為直譯式程式語言，讀到即會執行)

    <head> 
<script>
alert(Hello JavaScript);
</script>
</head>

  2. 內嵌於 <body></body> 之中 (可以讓 HTML 優先載入)

    <body> 
<script>
alert(Hello JavaScript);
</script>
</body>

  3. 外部引入檔案置於 <head> 或 <body> 內 (推薦使用)

    <script src="js/main.js"></script>

注意外部引入的 <script></script> 中不可再寫 JS。

變數

在程式語言中變數是一個暫時儲存資料的地方，賦值給變數的值都會有對應的資料型態，然而 JavaScript 是弱型別（Weak type）所以會有自動轉型的情形。

在 JavaScript 中，全域變數將使用 var，而在 ES6 中為了解決變數污染或誤用情形將 block-scope 的變數使用 let，若你需要固定不變的常數則是使用 const。 其中變數型別又分為：Primitive Data Type：String、Number、Boolean（ true 或 false）、undefinded、null，Reference Data Types：Object 兩種，差別在於將物件變數賦值給另外一個變數時是把引用賦值給新變數，所以當新變數更改屬性時會影響到原來物件。

Primitive Data Type：

var num = 12;
const str = 'Mark';

function checkLike() {
 let isActived = true;
}

// console.log 可以讓開發者透過瀏覽器開發者工具看到訊息，方便除錯
console.log(num);
console.log(str);
// 因為 let 是 function block scope，故會產生 "ReferenceError: isActived is not defined 錯誤
console.log(isActived);

Reference Data Types：

// 將物件變數賦值給另外一個變數時是把引用賦值給新變數，所以當新變數更改屬性時會影響到原來物件
let a = { name: 'Zuck' };
console.log(a);
let b = a;
b.name = 'Jack';
console.log(a);

運算子/運算元

在程式語言中都需要運算子，在 JavaScript 中有賦值運算子、算數運算子、比較運算子、邏輯運算子等不同運算子。

  1. 賦值運算子：使用 = 給定值給變數

    // Mark
const name = 'Mark';

  2. 算數運算子：四則運算

    // 4
const sum = 1 + 3;

  3. 比較運算子：數值比較

    const age = 23;
// true
const canVote = age >= 20;
// false
const canVote = age < 20;

  4. 邏輯運算子：邏輯判斷

    const a = true;
const b = true;
// 且，要兩個都 true
const result1 = a && b;
// 或，只要有一個 true，即為 true
const result2 = a || b;

流程控制（flow control）

在 JavaScript 中和許多程式語言一樣有 if...else、switch 條件判斷以及在處理陣列上很常使用的迴圈（當有明確次數時使用 for，當沒有明確數字時使用 while）

另外要注意的是在 JavaScript 中的 falsey 值：undefined、null、NaN、0、""（空字串）和 false，以上幾種情況在邏輯判斷時會轉換成 false

  1. if...else

    // 可以投票
if(age > 20) {
console.log('可以投票！');
}

  2. switch：當條件很多時可以善用 switch 判斷，記得要在每個 case 後寫 break，不然會全部都執行

    const country = 'Taiwan';
switch(grade) {
case 'Taiwan':
console.log('hello' + country);
break;
case 'Japan':
console.log('hello' + country);
break;
case 'Korea':
console.log('hello' + country);
break;
default:
console.log('hello' + country);  
}

  3. for：當你知道程式需要重複執行幾次時可以使用 for 迴圈

    const arr = ['Mark', 'Zuck', 'Jack'];
for(let i = 0; i < arr.length; arrr++) {
console.log(arr[i]);
}

  4. while：當你程式不知道需要重複執行幾次時可以使用 while 迴圈

    // 從 1 累加到 10
const num = 1;
while(num <= 10) {
let sum += num; // sum = sum + num
num += 1;
}

  5. do...while：當迴圈次數不明確時，可以使用 while，而 do while 會至少執行一次

    let x = 0;
while(x < 10) {
console.log(x);
x++;
}

let y = 0;
do {
console.log(y);
y++; 
} while(i < 10);

函式/函數（function）

函數是一種可以讓一段程式區塊重複使用的程式撰寫方式，在 JavaScript 中函數屬於一級物件（first class object），可以將函數當參數或變數傳遞，其扮演非常重要的角色，也讓 JavaScript 在函數式程式設計（functional programming）上更容易發揮。
函數可以傳入參數（如下的 x, y），也有可能沒有。函數使用 return 回傳值，若沒寫則回傳 undefined

function sum(x, y) {
 return x + y;
}

sum(12, 20);

在 ES6 簡化了函數的使用出現了箭頭函數（arrow function）：

const sum = (x, y) => {
 return x + y;
};

sum(1, 2);

物件（object）

物件是一種儲存資料的資料結構，可以對應成真實世界的物件（有屬性值和方法），一般而言主要有三種建立方式：

  1. 使用 new Object

    var obj = new Object();

  2. 使用 {}

    var obj = {
name: 'Mark',
age: 23
}

  3. 使用建構函數

    雖然 JavaScript 並非是 class-based 的物件導向程式語言，而是 prototype-based 的物件導向程式語言，但在 JavaScript 可以透過 function 建立類別的宣告函數（在 ES6 中已有 class 可以使用，但只是個語法糖）：

    // 實務上建構函數命名採單字首字大寫。狗狗物件有 name, age 屬性，方法是 wow 
function Dog(name, age) {
// 屬性值
this.name = name;
this.age = age;
// 每個實例都會有一份方法副本
this.wow = function() {
console.log('wow!wow');
}
}
// 多個實例共用，可以減少記憶體等資源運用
Dog.prototype.cry = function() {
console.log('QQQ');
}
const dog = new Dog('lucky', 2);
// wow!wow!
dog.wow();

DOM & BOM

事實上 HTML 可以轉換成一棵物件樹，也稱為 Document Object Model（DOM）。在撰寫網頁應用程式時往往需要操作到瀏覽器元素，我們通常是透過選取我們想要改變的元素（選擇器），然後修改我們的物件屬性

  1. 物件模型

    所謂的物件模型（Object Model）對於HTML 網頁來說，是一種規範如何存取HTML 元素、CSS 樣式和 JavaScript 程式碼的一種機制，可以將HTML元素、CSS樣式和 JavaScript 程式碼視為物件

  2. BOM

    js101

    BOM 就是 Browser Object Model 中文叫做瀏覽器物件模型，window 物件是瀏覽器最頂層物件，其下有 document（DOM）、history、location、navigator、screen 子物件。window 物件不須經過宣告，可直接使用，代表目前瀏覽器視窗。事實上，所有的全域變數、函式、物件，其實都是屬於 window 物件，而 BOM 物件的使用可讓我們操作包含開啟/關閉視窗，改變視窗大小，計時器與取得網址、存取瀏覽器屬性等

  3. DOM

    文件物件模型（Document Object Model，DOM）是給 HTML 與 XML 文件使用的一組 API。簡單的說就是將文件（文件可以想成單一網頁）物件化，以便提供一套通用存取的方式來處理文件內容。DOM 提供 HTML 網頁一種存取的方式，可以將 HTML 元素轉換成一棵節點樹，每一個標籤和文字內容是為一個節點，讓我們可以走訪節點 (Nodes) 來存取 HTML 元素

    <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My title</title>
</head>
<body>
<h1>My header</h1>
<a href="">My link</a>
</body>
</html>

    js101

    要操作 DOM 元素前要選取要操作哪個

    • 根據ID名稱選取
      document.getElementById(elementId)

    • 根據元素名稱選取
      document.getElementsByTagName(tagName)

    • 根據名稱選取
      document.getElementsByName(name)

    • 根據 Class 名稱選取
      document.getElementsByClassName(classname)

    有很多元素符合，回傳的是 NodeList 物件集合，使用 item() 存取 (注意 Element's')，迭代使用 forEach 不然就要轉陣列

    document 物件有提供使用 CSS 選擇器來選取元素，效能較好

    • document.querySelectorAll() 方法
      document 物件的 querySelectorAll() 方法可以取得 HTML 的節點陣列或清單，為一個 NodeList 物件（若要使用 map 方法需要轉陣列，不然只能用 forEach ）

    • document.querySelector() 方法
      只會回傳一個符合的元素，沒有就回傳 null

    範例：

    <div class="info"></div>
<div class="info"></div>

<div id="danger"></div>

<script type="text/javascript">
document.querySelector('#danger').innerHTML = '<h1>嘿嘿，是我</h1>';

document.querySelectorAll('.info').forEach((value, index) => {
 value.innerHTML = '<h1>坐著打，普天之下排名第二</h1>';
});
</script>

事件處理（event handler）

事件處理（Event Handlers）是 JavaScript 非常重要的功能，事件是用來處理 JavaScript 與 HTML 之間的互動、建立動畫效果並和使用者互動

  • 事件處理簡單說就是當一個事件發生時（網頁載入、按下右鍵等），程式會相對應做出怎樣的處理

  • 例如：當使用者按下按鈕時會觸發 click 的事件（事件發生）並讓按鈕變成紅色（處理事件），這就是一種事件處理機制

事件處理機制

事件處理 = 事件種類 + 事件處理方法

  • 事件種類（Event Type）
    又稱事件名稱 (Event Name)，為一個字串，說明發生了什麼事件，例如：click (點擊)、mousemove (滑鼠滑過)

  • 事件處理（Event Handlers）
    係指處理事件的函數名稱，當事件發生時要呼叫哪個函數進行處理

// 當發生 click 事件，會發出 alert 
btn.addEventListener('click', function() {
   alert('被點了!');
});

完整範例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <button id="btn">點我點我</button>
  <script type="text/javascript">
 const btn = document.querySelector('#btn');

 btn.addEventListener('click', function() {
   alert('被點了!');
 });   
  </script>
</body>
</html>

非同步處理（Ajax）

傳統上我們會使用 <form> 表單和後端程式作互動，然而每次提交表單送出請求給伺服器，伺服器接收並處理傳來的表單，然後送回一個新的網頁。使用 Ajax 應用可以僅向伺服器發送並取回必須的數據，並在客戶端採用JavaScript 處理來自伺服器的回應，不僅減少伺服器負擔也加快反應速度

同步 vs. 非同步

JavaScript 101 快速入門教學

依序執行，等到上一個函數任務執行完才能執行下一個

JavaScript 101 快速入門教學

不會因為上一個函數尚未執行完（例如：回傳結果）就卡住，會往下執行下一個任務

什麼是同步/非同步？

  • 非同步係指程式不會因為上一個函數尚未執行完（例如：回傳結果）就卡住，會往下執行下一個任務

  • 同步就是要等到上一個函數任務執行完才能執行下一個，是依序執行

由於 DOM 事件處理 和 Ajax 呼叫是非同步處理，所以大部分人會為 JavaScript 貼上非同步程式設計的標籤

什麼是 Ajax？

  • Ajax 全名：Asynchronous Javascript And XML，指的是一套綜合了多項技術的瀏覽器端網頁開發技術

  • 雖然 Ajax 中使用 XML 為名，不過 Ajax 不是指一種單一的技術。現在許多應用都使用更輕量的 JSON 進行資料傳輸

  • 可以完成不刷頁局部更新應用，使用者體驗較好。不過要小心回調地獄（callback hell）

簡易 Ajax 實作

// 若需要支援跨瀏覽器，還需要額外檢驗
if (typeof XMLHttpRequest != 'undefined') {
    // 一般使用 XMLHttpRequest 物件
    const xhr = new XMLHttpRequest();
    const REQUEST_URL = 'http://163.29.157.32:8080/dataset/6a3e862a-e1cb-4e44-b989-d35609559463/resource/f4a75ba9-7721-4363-884d-c3820b0b917c/download/393625397fc043188a3f8237c1da1c6f.json';

    // 監聽是否完成
    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            console.log(xhr.responseText);
        }
    }

    xhr.open('GET', REQUEST_URL);
    xhr.send();
}

JSON 基礎概念

  • JSON（JavaScript Object Notation）是一種由Douglas Crockford 構想設計、輕量級的資料交換語言，以文字為基礎，且易於讓人閱讀

  • JSON 雖然起於 JavaScript，但資料格式與語言無關，目前很多程式語言都支援 JSON 格式資料的生成和解析

  • JSON 的官方 MIME 類型是 application/json，其副檔名是 .json

  • 基本格式 { "key": "value" }、{ "key": ["value1", "value2"] }

JSON 長這樣

{
     "name": "John Smith",
     "address": 
     {
         "streetAddress": "21 2nd Street",
         "city": "New York",
         "state": "NY",
         "postalCode": "10021"
     },
     "phoneNumber": 
     [
         {
           "type": "home",
           "number": "212 555-1234"
         },
         {
           "type": "fax",
           "number": "646 555-4567"
         }
     ]
 }

總結

以上介紹了新手上路 JavaScript 入門核心基礎概念，大家可以善用 JSBin 實際動手操作，並參考 MDN 或 W3CSchool 的案例會更清楚整體觀念喔！

延伸閱讀

  1. 用十分鐘瞭解 陳鍾誠的程式設計課 (採用JavaScript + C的原因)
  2. You-Dont-Know-JS
  3. JavaScript與前端程式設計入門自學參考
  4. JavaScript Garden
  5. JavaScript核心
  6. [稀土掘金日报] JavaScript 开发者必备的资源合集
  7. 專為中學生寫的 JavaScript 程式書
  8. nzakas/computer-science-in-javascript
  9. 重新介紹 JavaScript

（image via mpr、mahmoudzalt）

關於作者：
@kdchang 文藝型開發者，夢想是做出人們想用的產品和辦一所心目中理想的學校。A Starter & Maker. JavaScript, Python & Arduino/Android lover.:)


#javascript #ECMAScript2015 #ES6 #Front End #Front End Development Environment

KD Chang
Founder @TechBridge/CoderBridge
A Starter, Software Engineer & Maker. JavaScript & Python lover.:) 工程師/創業者/教育者/寫作者




Facebook


Related Posts

SSRF lab (1)

SSRF lab (1)

 nathan2009729
淺談 JavaScript 中的時間與時區處理

淺談 JavaScript 中的時間與時區處理

 huli
Visual Studio Paste Change Spaces into Tabs

Visual Studio Paste Change Spaces into Tabs

 adrianwudev

Newsletter



Comments